<template>
	<view class="cateListContainer">
		<!-- 轮播图区 -->
		<swiper class="banners" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<!-- 每个轮播项 -->
			<swiper-item v-for=" ( bannerItem, index) in cateObj.category.bannerUrlList" :key="bannerItem">
				<view class="swiper-item">
					<image :src="bannerItem" class="swimg"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 标题 -->
		<view class="title">{{ cateObj.category.name }}</view>
		<!-- 描述 -->
		<view class="desc">{{ cateObj.category.frontDesc}}</view>
		<!-- 列表内容区域 -->
		<view class="shop-list">
			<!-- 在这里绑定一个跳转到详情页的方法 -->
			<view class="shop-item" v-for="(goods, index) in  cateObj.itemList" :key="goods.id" @click="gotoDetail(goods)">
				<!-- 商品图片 -->
				<image :src="goods.listPicUrl" class="shop-img"></image>
				<!-- 商品描述 -->
				<view class="shop-info common">{{goods.name}}</view>
				<!-- 商品价格 -->
				<view class="shop-price common">{{goods.retailPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["navId"],
		name: "CateList",
		data() {
			return {
				//接收整个cateList的数据
				cateList: []
			};
		},
		computed: {
			//定义一个cateObj用于接收父ID和传入的navId一样的那个对象
			cateObj() {
				const rs = this.cateList.find(item => item.category.parentId === this.navId)
				return rs
			}
		},
		mounted() {
			//页面一初始化，就调用获取数据的方法
			this.getIndexCateList()
		},
		methods: {
			//跳转到商品详情页的方法
			gotoDetail(goods){
				uni.navigateTo({
					url:"/pages/detail/detail?goods="+JSON.stringify(goods)
				})
			},
			//向服务器发起请求，获取本页面的数据
			async getIndexCateList() {
				const {
					data
				} = await uni.$axios("/getIndexCateList")
				//将取得的数据赋值给 cateList
				this.cateList = data
			}
		}
	}
</script>

<style lang="stylus" scoped>
.cateListContainer{
	.banners{
		width 100%;
		height 370rpx;
		.swiper-item{
			height 370upx;
			.swimg{
				width 100%
			}
		}
	}
	.title{
		font-size 36rpx;
		color #333333;
		line-height 36rpx;
		text-align center;
	}
	.desc{
		color #999999;
		font-size 26rpx;
		text-align center;
		line-height 26rpx;
		margin: 10upx 0;
	}
	.shop-list{
		display flex;
		flex-wrap wrap;
		justify-content space-around;
		//这里加伪类，给shopList增加最后一个元素,目的是让最后一个元素不要单着空在哪里
		&::after{
			content "";
			width 344upx;
		}
		.shop-item{
			width 344upx;
			.shop-img{
				width 344upx;
				height 344upx;
			}
			.common{
				font-size 26upx;
				line-height 40upx;
			}
			.shop-price{
				color red;
				font-weight bold;
			}
		}
	}
}
</style>
